<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件树示例 - JSON 数据展示</title>
    <style>
        /* 文件树的基础样式 */
        body {
            font-family: Arial, sans-serif;
        }
        ul {
            list-style: none;
            padding-left: 20px;
        }
        li {
            cursor: pointer;
            position: relative;
            margin: 5px 0;
        }
        .folder::before {
            content: '📁'; /* 文件夹图标 */
            margin-right: 5px;
        }
        .file::before {
            content: '📄'; /* 文件图标 */
            margin-right: 5px;
        }
        .hidden {
            display: none;
        }
        .comment {
            margin-left: 10px;
            font-size: 12px;
            color: gray;
        }
        button {
            margin: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script src="文件树.json"></script>
</head>
<body>
    <h1>华为数据构造示意</h1>
    <button id="screenshot-btn">截图保存</button>
    <button id="expand-btn">一键展开</button>
    <button id="collapse-btn">一键折叠</button>
    <ul id="file-tree"></ul> <!-- 用于展示文件树 -->

    <script>
        // 加载 JSON 数据
        const fileTree1 = JSON.parse(JSON.stringify(dataJson));
        const fileTreeData = fileTree1;

        // 递归生成文件树的 HTML 结构
        function generateFileTree(data) {
            const ul = document.createElement('ul');

            if (data.children) {
                data.children.forEach(child => {
                    const li = document.createElement('li');
                    li.classList.add(child.type);

                    // 添加文件/文件夹名称和注释
                    li.innerHTML = `${child.name} ${child.comment ? `<span class="comment">// ${child.comment}</span>` : ''}`;

                    // 如果有子节点，递归生成子树
                    if (child.type === 'folder' && child.children) {
                        const childUl = generateFileTree(child);
                        li.appendChild(childUl);

                        // 点击折叠/展开逻辑
                        li.addEventListener('click', (e) => {
                            e.stopPropagation();
                            childUl.classList.toggle('hidden');
                        });
                    }
                    ul.appendChild(li);
                });
            }
            return ul;
        }

        // 一键展开所有文件和文件夹
        function expandAll() {
            document.querySelectorAll('#file-tree ul').forEach(ul => {
                ul.classList.remove('hidden');
            });
        }

        // 一键折叠文件内容，但保留文件夹显示
        function collapseAll() {
            // 遍历所有的文件夹，并折叠其子内容
            document.querySelectorAll('#file-tree li.folder').forEach(folder => {
                const childUl = folder.querySelector('ul');
                if (childUl) {
                    childUl.classList.add('hidden'); // 折叠子元素
                }
            });
        }

        // 渲染文件树
        const fileTreeContainer = document.getElementById('file-tree');
        const fileTree = generateFileTree(fileTreeData);
        fileTreeContainer.appendChild(fileTree);

        // 截图按钮事件
        document.getElementById('screenshot-btn').addEventListener('click', function() {
            html2canvas(fileTreeContainer, {
                background: '#ffffff', // 设置背景颜色为白色
                onrendered: function(canvas) {
                    // 创建下载链接
                    const link = document.createElement('a');
                    link.href = canvas.toDataURL(); // 图片数据URL
                    link.download = 'file-tree.png'; // 设置文件名
                    link.click(); // 自动点击下载链接
                }
            });
        });

        // 添加一键展开和一键折叠的按钮事件
        document.getElementById('expand-btn').addEventListener('click', expandAll);
        document.getElementById('collapse-btn').addEventListener('click', collapseAll);
    </script>
</body>
</html>
